<template>
	<view class="pages">
		<cu-custom bgColor="uerHead1" :isBack="true" textRight="true" type="1" >
			<block slot="backText" class="titilestyle">{{title}}</block>
			<block slot="right" class="" @click="clickRecord">报修记录</block>
		</cu-custom>
		<view class="item-box" :style="[{height:scrollH+'px'}]">
			<scroll-view scroll-y="true" :style="[{height:scrollH+'px'}]" v-if="list && list.length>0">
				<view class="item-box-box  " v-for="(itm,i) in list" :class="i==0?'indexMargin':'marginTop'">
					<view class="item-box-box-head ">
						{{itm.name}}
					</view>
					<view class="guarant-type " v-for="(item,index) in itm.child" @click="jump(item)">
						<image :src="item.icon" class="clickEffict" mode="aspectFit" @error="errorImg(i,index)"
							lazy-load="true"></image>
						<text class="">{{item.name}}</text>
					</view>
				</view>
				<view class="item-box-box1 margin-top" v-if="!list || list.length==0">
					<text>暂无数据</text>
				</view>
				<view class="foot">

				</view>
			</scroll-view>
		</view>
	</view>

</template>

<script>
	export default {
		name: "User",
		data() {
			return {
				title: "寝室报修",
				StatusBar: this.Custom,
				Ww: this.WW,
				swiperHeight: 0,
				doman: this.apiHost,
				params: "",
				list: [],
				scrollH: this.WH - this.CustomBar - 5,
			}
		},
		onLoad(option) {
			this.params = option;
			this.loadData(); //加载数据
		},
		onShareAppMessage(res) {
			return {
				title: "一舟校园-" + this.title,
				path: '/app/DormWarranty/pages/index?params=' + this.params
			}

		},
		mounted() {
			this.swiperHeight = this.WH - (this.StatusBar.top + this.StatusBar.height);
		},
		methods: {
			/**
			 * 返回
			 */
			back() {
				uni.navigateBack({
					delta: 1,
					success: function() {

					}
				});

			},
			errorImg(i, index) { //图片加载失败给出默认图
				this.list[i].child[index].icon = this.resDomain + "/static/img/error.png";
			},
			jump(...dat) {
				uni.navigateTo({
					url: "./subFrom?item=" + JSON.stringify(dat[0]),
					animationType: 'slide-in-right'
				})
			},
			/**
			 * 进入报修记录
			 */
			clickRecord() {
				uni.navigateTo({
					url: "./record",
					animationType: "slide-in-right"
				})
			},
			/**
			 * 加载数据
			 * 
			 */
			loadData() {
				this.apiRequest('/buyer/serverList', {
					area_id: uni.getStorageSync('area_id'),
				}, 0, 'GET').then(res => {
					if (res.code == 200) {
						this.list = res.data;

					}
				});

			}



		}




	}
</script>

<style scoped>
	.item-box {
		width: 100%;

		display: flex;
		flex-direction: column;

	}

	.search-box {
		width: 100vw;
		display: flex;
		flex-direction: row;
		align-items: center;
		position: relative;
	}

	.record {
		position: absolute;
		float: right;
		right: 1%;
		font-size: 32upx;
		font-weight: 500;
		color: #333333;
		display: flex;
		align-items: center;
	}

	.input-search-box1 {
		width: 60%;
		height: 100%;
		display: flex;
		align-items: center;
		background: #F7F7F7;
		border-radius: 20px;
		position: relative;
	}

	.item-box-box1 {
		width: 100%;
		height: 30vh;
		line-height: 30vh;
		text-align: center;

	}

	.indexMargin {
		margin: auto;
	}

	.marginTop {
		margin: 20upx auto;
	}

	.item-box-box {
		width: 92vw;

		background: #FFFFFF;
		box-shadow: 0px 0px 10upx 0px rgba(0, 0, 0, 0.05);
		border-radius: 20upx;
		display: flex;
		flex-wrap: wrap;
		padding-bottom: 15upx;


	}

	.item-box-box-head {
		width: 100%;
		height: 60upx;
		margin-top: 20upx;
		line-height: 60upx;
		font-size: 32upx;
		font-weight: 800;
		color: #333333;
		padding-left: 4%;
	}

	.guarant-type {
		width: 18vw;
		height: 24vw;
		display: flex;
		flex-direction: column;
		margin: 1vw 2.4vw;
	}

	.guarant-type image {
		width: 14vw;
		height: 14vw;
		margin: auto;


	}

	.guarant-type text {
		width: 18vw;
		height: 5vw;
		text-align: center;
		line-height: 5vw;
	}

	.item-box-boxes {
		width: 96%;
		margin: auto;
		display: flex;
		flex-wrap: wrap;
	}
</style>
